import React from "react";
import './App.css';
import Demo from "./Demo";

import router from "./router";
import Nav from "./components/Nav/Nav";

import A from "./components/A/A";


import {Routes,Route,Link,NavLink,Navigate,useRoutes} from 'react-router-dom'


export default function App(){
    
    let routes=useRoutes(router);

        return <React.Fragment>
            {/* <h1>h1标签App类组件</h1>
            <p className="app-con">p标签</p>
            <br/>
            <Demo/>
            <Header/>
            <Middle></Middle>
            <Mv></Mv>
            <Footer/> */}

            {/* <Home></Home>
            <Ref></Ref>

            <Hooks></Hooks>
            <Todolist></Todolist>
            <Heros></Heros>
            <Duanzi></Duanzi> */}

            {/* <A></A> */}


            {/* 用标签包裹
                1. <BrowserRouter></BrowserRouter>  将所有组件全部包裹进去
                2. <Routes></Routes>  包裹所有的 路由<Route></Route>
                3. <Route></Route>  单个路由组件
                <Route path="地址名"  element={<组件 />}  />
            */}
            
                
                <Nav/>
                {routes}

                {/* <Routes> */}
                    {/* path中写 / 会直接在app主页面显示 */}
                    {/* <Route path='/home' element={<Home />} />
                    <Route path="/ref" element={ <Ref />}  />
                    <Route path="/hooks" element={ <Hooks />}  />
                    <Route path="/todolist" element={ <Todolist />}  />
                    <Route path="/heros" element={ <Heros />}  />
                    <Route path="/duanzi" element={ <Duanzi />}  />

                    <Route path='/news' element={<News></News>}> */}

                                {/* 配置子路由 */}
                        {/* <Route path="/news/guonei" element={<Guonei/>}></Route>
                        <Route path="/news/junshi" element={<Junshi/>}></Route>
                        <Route index element={<Navigate to="/news/guonei"/>} ></Route>

                    </Route> */}

                    {/* * 代表所有路由地址  必须写在最后 */}
                    {/* <Route path="*" element={ <NotFound />}  /> */}
                {/* </Routes> */}
            
        </React.Fragment>
    }
